<template>
  <div>
    <el-row>
      <el-col :span="22">
        <!-- <div class="step_title" id="">基础信息</div> -->
        <el-descriptions title="基础信息" :column="2" class="step_title" id="plan_base">
          <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
          <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
          <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
          <el-descriptions-item label="Remarks">
            <el-tag size="small">School</el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
      <el-col :span="2">
        <el-anchor type="underline" :offset="70">
          <el-anchor-link @click="goToAnchor('#plan_base')">基本信息</el-anchor-link>
          <el-anchor-link @click="goToAnchor('#plan_purchase')">采购信息</el-anchor-link>
          <el-anchor-link @click="goToAnchor('#plan_economics')">经济可行性</el-anchor-link>
          <el-anchor-link @click="goToAnchor('#plan_data')">资料信息</el-anchor-link>
        </el-anchor>
      </el-col>
    </el-row>
  </div>
</template>
<script setup name="Detail">
const goToAnchor = (selector) => {
  document.querySelector(selector).scrollIntoView({
    behavior: "smooth", // 平滑过渡
    block: "center" //[可选] "start"，"center"，"end"或"nearest"。默认为"center"。
  })
}

</script>

<style scoped lang="scss">
.step_title {
  line-height: 20px;
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-left: 10px;
  margin: 20px 0 20px;
  &::before {
    position: absolute;
    left: 0;
    height: 20px;
    width: 4px;
    background-color: #3970e3;
    content: "";
  }
}
</style>